<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索提示框</title>
    <style>
        .container #search{
            width:300px;
        }
        .container .alert{
            width: 300px;
            border:1px solid lightgray;
            display:none;
        }
        .container .alert ul{
            list-style:none;
            padding:0;
            margin:0;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 搜索框 -->
        <input type="text" id="search">
        <!-- 提示框 -->
        <div class="alert">
            <ul></ul>
        </div>
    </div>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        // 捕获用户输入行为
        // 1.绑定键盘事件 -> keydown、keyup和keypress
        // 2.绑定输入事件 -> input
        $("#search").bind('input',function(){
            $('.alert>ul').empty();
            // 1.根据用户输入的内容，动态获取相关提示数据
            var inputValue = $(this).val();
            $.getJSON('data/server.json',function(data){
                $.each(data,function(index,obj){
                    var name = obj.name     //获取当前按下的一个字母
                    if(name.indexOf(inputValue)>=0){
                        var value = obj.value;
                        $.each(value,function(index,text){
                            $('.alert>ul').append($('<li>'+text+'</li>'));
                        })
                    }
                })
            })
            // 2.将隐藏的提示框显示出来
            $('.alert').css('display','block');
        }).bind('blur',
            function(){
                $('.alert').css('display',"none")
            })
    </script>
</body>
</html>